<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/bg.jpg" type="image/png" />
    <title>尬聊</title>
    <link rel="stylesheet" href="css/reset.min.css" />
    <link rel="stylesheet" href="css/websocket.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/socket.io.min.js"></script>
    <script src="js/js.cookie.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- 聊天室 -->
      <div class="chatroom">
        <form autocomplete="off">
          <div class="chatBox">
            <!-- 聊天室标题 -->
            <div class="chat_title">
              尬聊(<span class="total"></span>)
              <div class="logout"></div>
            </div>
            <!-- 昵称 -->
            <div class="chat_nick">
              <div class="nickname">
                昵称：<span class="showName Nickname"></span>
                <input type="text" id="nickname" />
              </div>
              <div class="uploadTips">
                <span class="uploadName">564654.jpg</span>正在发送中...
              </div>
            </div>
            <!-- 聊天内容 -->
            <div class="chat_content">
              <!-- 左边聊天内容 -->
              <div class="content_left"></div>
              <!-- 右边聊天用户 -->
              <div class="content_right">
                <!-- 用户列表 -->
                <div class="userList">用户列表</div>
                <!-- 用户信息 -->
                <div class="userInfo">
                  <!-- 自己 -->
                  <div class="myself Info_item">
                    <div class="headImg"></div>
                    <div class="Nickname"></div>
                  </div>
                  <!-- 其他人 -->
                  <div class="Info_list"></div>
                </div>
              </div>
            </div>
            <!-- 发送信息 -->
            <div class="chat_send">
              <!-- 工具栏 -->
              <div class="send_tools">
                <!-- 图片 -->
                <div class="toolsItem sendImg"></div>
                <input type="file" id="sendImg" accept="image/*" hidden />
                <!-- 音频 -->
                <div class="toolsItem sendAudio"></div>
                <input type="file" id="sendAudio" accept="audio/*" hidden />
                <!-- 视频 -->
                <div class="toolsItem sendVideo"></div>
                <input type="file" id="sendVideo" accept="video/*" hidden />
                <!-- 文件 -->
                <div class="toolsItem sendFile"></div>
                <input type="file" id="sendFile" hidden />
              </div>
              <!-- 输入栏 -->
              <div class="send_input">
                <div class="sendInput">
                  <textarea type="textarea" id="sendInput"></textarea>
                  <div class="sendInputTips">正在发送中...</div>
                </div>
                <div class="sendBtn">
                  <div id="sendBtn">发送</div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <!-- 提示 -->
      <div class="message">
        <span></span>
        <div class="close">×</div>
      </div>
    </div>
  </body>
  <script src="js/websocket.js"></script>
</html>
